<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物招领系统 - 发布帖子</title>
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/system/css/all.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/system/css/select2.min.css}">
    <!--外观 得放select下面，不然下拉栏会乱-->
    <link rel="stylesheet" th:href="@{/system/css/adminlte.min.css}">
    <!-- Toastr -->
    <link rel="stylesheet" th:href="@{/system/css/toastr.min.css}">
    <style>
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/system/header::header-nav"></div>
    <div th:replace="pc/system/header::header-nav-model"></div>
    <!-- 内容 -->
    <div style="display:flex; justify-content: center; margin-top: 20px">
        <div class="card card-outline" style="width: 800px; border-top: 3px solid #ffc107">
            <div class="card-body">
                <!--标题-->
                <div class="form-group">
                    <label for="postTitle">帖子标题</label>
                    <input type="text" id="postTitle" class="form-control" placeholder="请输入标题（20字符以内）">
                </div>
                <!-- 宠物类别 帖子类型 -->
                <div class="form-group" style="display: flex">
                    <div>
                        <label>宠物类别</label>
                        <div style="display: flex">
                            <div style="width: 200px;height: 30px">
                                <select id="postFirstPetCategories" class="form-control select2">
                                </select>
                            </div>
                            <div style="margin-left: 20px; width: 200px; height: 30px">
                                <select id="postSecondPetCategories" class="form-control select2">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div style="margin-left: 148px;">
                        <label for="postType">发布类型</label><br>
                        <input type="checkbox" name="postType" id="postType" checked data-bootstrap-switch
                               data-off-color="info" data-on-color="danger"
                               data-off-text="招领" data-on-text="丢失">
                    </div>
                </div>
                <!-- 图片 -->
                <div class="form-group" style="display: flex; margin-top: 25px">
                    <div>
                        <h6><b>添加宠物主图（完整样貌）</b></h6>
                        <!--主图-->
                        <a id="openMainImage" href="#" style="font-size: 70px; color: #63d9ec;">
                            <i class="fas fa-image"></i>
                        </a>
                        <div id="mainImageDiv" style="width: 80px; height: 80px; display: none">
                            <img src=""  alt="未选择" class="w-100 h-100">
                        </div>
                        <input type="file" id="mainImage" name="mainImage" style="display: none">
                    </div>
                    <div style="margin-left: 30px">
                        <h6><b>添加宠物其它图片（可选）</b></h6>
                        <!--副图1-->
                        <a id="openOtherImage" href="#" style="font-size: 70px; color: #63d9ec;">
                            <i class="fas fa-image"></i>
                        </a>
                        <div id="otherImageDiv" style="width: 180px; height: 80px; display: none">
                            <div style="display: flex">
                                <div style="width: 80px; height: 80px">
                                    <img id="otherFirstImage" src=""  alt="未选择" class="w-100 h-100">
                                </div>
                                <div style="width: 80px; height: 80px; margin-left: 20px">
                                    <img id="otherSecondImage" src=""  alt="未选择" class="w-100 h-100">
                                </div>
                            </div>
                        </div>
                        <input type="file" id="otherImage" name="otherImage" style="display: none" multiple>
                    </div>
                </div>
                <!-- 地址选择 -->
                <div class="form-group">
                    <label>地区选择</label>
                    <div style="display: flex">
                        <div style="width: 200px;height: 30px">
                            <select id="postFirstAddresses" class="form-control select2">
                            </select>
                        </div>
                        <div style="margin-left: 20px; width: 200px; height: 30px">
                            <select id="postSecondAddresses" class="form-control select2">
                            </select>
                        </div>
                        <div style="margin-left: 20px; width: 318px; height: 30px">
                            <select id="postThirdAddresses" class="form-control select2">
                            </select>
                        </div>
                    </div>
                </div>
                <!-- 文本内容 -->
                <div class="form-group">
                    <label for="inputDescription">文本内容</label>
                    <textarea id="inputDescription" class="form-control" rows="4"
                              placeholder="请输入文本内容，例如宠物颜色、具体丢失地址等（200字符以内）"></textarea>
                </div>
                <div style="display: flex;">
                    <a th:href="@{/index}" class="btn btn-block btn-outline-dark mr-auto"
                       style="width: 100px; margin-top: 8px;">
                        取消
                    </a>
                    <button id="upload" type="button" class="btn btn-block btn-outline-success" style="width: 100px;">
                        发布
                    </button>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>
<!-- jQuery -->
<script th:src="@{/system/js/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/system/js/bootstrap.bundle.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/system/js/select2.full.min.js}"></script>
<!-- Bootstrap Switch -->
<script th:src="@{/system/js/bootstrap-switch.min.js}"></script>
<!-- Toastr -->
<script th:src="@{/system/js/toastr.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/system/js/adminlte.js}"></script>
<!-- 自己 -->
<script th:src="@{/system/js/public.js}"></script>
<script th:src="@{/system/js/header.js}"></script>
<script th:src="@{/system/js/address_category.js}"></script>
<script th:src="@{/system/js/pet_category.js}"></script>
<script th:src="@{/system/js/create_post.js}"></script>
</body>
</html>